<template>
  <div class="tools">
    <Header class="head-nft-creator" />
    <div class="revoke">
      <div class="revoke__title">
        <i class="iconfont icon-security"></i>
        <span>Take Back Control of Your Wallet.</span>
      </div>
      <div class="revoke__summary">
        <span
          >When using dapps like Uniswap or OpenSea you have to grant them
          permission to spend your tokens and NFTs. This is called an allowance.
          If you don't revoke these allowances, the dapp can spend your tokens
          forever. Take back control by revoking your allowances.</span
        >
      </div>
      <div class="revoke__search">
        <SearchBar />
      </div>
      <div class="revoke__subtitle">
        <span>How To Revoke Your Allowances.</span>
      </div>
      <div class="revoke__list">
        <div class="revoke__step">
          <i class="iconfont icon-connect"></i>
          <div>
            <span>1. Connect</span>
            <span
              >Click Connect Wallet on the top right or enter an address in the
              search bar.</span
            >
          </div>
        </div>
        <div class="revoke__step">
          <i class="iconfont icon-search"></i>
          <div>
            <span>2. Inspect</span>
            <span
              >Inspect your allowances by using the network selection, sorting
              and filtering options.</span
            >
          </div>
        </div>
        <div class="revoke__step">
          <i class="iconfont icon-privacy"></i>
          <div>
            <span>3. Revoke</span>
            <span
              >Revoke the allowances that you no longer use to prevent unwanted
              access to your funds.</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import ChainList from "@/components/ChainList";
import SearchBar from "./components/SearchBar";

export default {
  components: {
    Header,
    ChainList,
    SearchBar
  },
  data() {
    return {
      chainCode: "",
    };
  },
  mounted() {},
  methods: {
    select(val) {
      const { chainCode } = val;
      this.chainCode = chainCode;
    },
  },
};
</script>

<style lang="scss" scoped>
.tools {
  position: relative;
  width: 100vw;
  background-color: #14161a;
}

.revoke {
  width: 50vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;

  &__title {
    display: flex;
    align-items: center;

    .iconfont {
      font-size: 52px;
      transform: translateY(3px);
    }
    span {
      font-size: 42px;
      font-family: "Roboto Bold";
    }
  }

  &__summary {
    margin: 30px 0 60px;
    span {
      font-size: 16px;
      line-height: 24px;
      color: var(--color-content);
    }
  }

  &__search {
    width: 100%;
    margin: 0 auto 80px;
  }

  &__subtitle {
    margin-bottom: 50px;
    span {
      font-size: 28px;
      font-family: "Roboto Medium";
    }
  }

  &__list {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
  }

  &__step {
    display: flex;
    align-items: flex-start;

    i {
      font-size: 48px;
      color: var(--color-content);
      margin-right: 10px;
    }

    div {
      display: flex;
      flex-direction: column;

      span {
        &:first-child {
          font-size: 20px;
          font-family: "Roboto Medium";
          margin-bottom: 10px;
          color: var(--color);
        }

        &:last-child {
          font-size: 14px;
          line-height: 20px;
          color: var(--color-content);
        }
      }
    }
  }
}
</style>
